题目:请实现如下函数,可以批量请求数据,所有的 url 地址在 urls 参数中,同时可以通过 max 参数控制请求的并行数,当所有请求结束之后,需要执行 callback 回调函数,发送请求的函数可以直接使用 fetch 即可
function sendRequest(urls: strind[], max: number, callback: () => void) {}复制代码
思路分析:
- 通过批量并且当所有请求结束后,在执行 callback 我们初步确定使用 Promise.all 可以实现此功能,
- 由于请求地址在 urls 数组中,因为是一个并行的问题,所以我们可以将请求地址进行按照 max 来进行分组,最后得到多少组就执行多少次请求
具体代码实现:
let bodyElement = document.body let urls = [ 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2580986389,1527418707&fm=27&gp=0.jpg', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1995874357,4132437942&fm=27&gp=0.jpg', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640393967,721831803&fm=27&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1548525155,1032715394&fm=27&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2434600655,2612296260&fm=27&gp=0.jpg', 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2160840192,133594931&fm=27&gp=0.jpg' ] let max = 4 let callback = () => { console.log('所有请求完成了') } // 定义一个分组函数 已 max 为最大个数存储在一个对象中 let group = (urls, max) => { let groupObj = {} urls.forEach((item, index) => { let group = parseInt(index / max) if (groupObj[group]) { return groupObj[group].push(item) } groupObj[group] = [item] }) return groupObj } function sendRequest(urls, max, callback) { let groupResult = group(urls, max) let currentIndex = 0 // 使用 fetch 封装请求 let getFetch = source => { return source.map(item => fetch(item).then(res => res.blob())) } let send = () => { // 判断有没有当前组 groupResult[currentIndex] && Promise.all(getFetch(groupResult[currentIndex])) .then((body) => { callback() currentIndex++ console.log(body, `第${currentIndex}次批量请求成功`) let html = '' body.forEach(item => { html += `` }) bodyElement.innerHTML += html // 用延时器是因为反应接口太快 以便于观察 setTimeout(() => { send() }, 1000) }) .catch((err) => { console.log('error') }) } send() } sendRequest(urls, max, callback)复制代码
功能已实现,大家有什么好的实现方法可以评论下,敬请指教。复制代码